<template>
  <div class="totalFlow-wrap">
    <div class="content">
      <div class="show-title">
        <span>总流量限制详细信息</span>
      </div>
      <el-form
        :inline="true"
        :model="ruleform"
        ref="form"
        :rules="rules"
        class="demo-form-inline totalFlow-form"
      >
        <el-form-item label="选择其中一个限制的类型" prop="limited_type">
          <el-radio-group v-model="ruleform.limited_type">
            <!-- 1 -->
            <div class="item">
              <el-radio label="FREE">不受限制</el-radio>
            </div>
            <!-- 2 -->
            <div class="item">
              <el-radio label="DEADTIME">截止时间限制</el-radio>
              <span>
                <el-date-picker
                  v-model="ruleform.picker"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </span>
            </div>
            <!-- 3 -->
            <div class="item">
              <el-radio label="DURATION">总时长限制</el-radio>
              <span>
                <el-form-item label prop="day">
                  <el-input
                    v-model="ruleform.day"
                    style="width:100px"
                    message
                    placeholder
                  ></el-input
                  >天
                </el-form-item>
                <span>
                  <el-form-item label prop="hour">
                    <el-input
                      v-model="ruleform.hour"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >小时
                  </el-form-item>
                </span>
                <span>
                  <el-form-item label prop="minute">
                    <el-input
                      v-model="ruleform.minute"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >分
                  </el-form-item>
                </span>
                <span>
                  <el-form-item label prop="second">
                    <el-input
                      v-model="ruleform.second"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >秒
                  </el-form-item>
                </span>
              </span>
            </div>
            <!-- 4 -->
            <div class="item">
              <el-radio label="TRAFFIC">总流量限制</el-radio>
              <span>
                <el-form-item label prop="TRAFFIC">
                  <el-input
                    v-model="ruleform.TRAFFIC"
                    style="width:100px"
                    message
                    placeholder
                  ></el-input
                  >GB
                </el-form-item>
              </span>
            </div>
          </el-radio-group>
        </el-form-item>
        <br />
        <el-form-item class="btn-wrap">
          <el-button type="primary" plain @click="onSubmit('form')"
            >添加</el-button
          >
          <el-button type="warning" plain @click="onReset('form')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { tempToTime } from "@/utils/Tool";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      sn: "",
      ruleform: {
        ptl: "",
        channel: "",
        limited_type: "FREE",
        picker: "",
        day: "",
        hour: "",
        minute: "",
        second: "",
        TRAFFIC: ""
      },
      rules: {
        limited_type: [
          { required: false, message: "请选择业务范围", trigger: "blur" }
        ]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.sn = this.$route.query.sn;
    this.getList();
  },
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;
      let picker_timestamp = new Date(that.ruleform.picker).getTime();

      var day = !Number(that.ruleform.day) ? 0 : Number(that.ruleform.day);
      var hour = !Number(that.ruleform.hour) ? 0 : Number(that.ruleform.hour);
      var minute = !Number(that.ruleform.minute)
        ? 0
        : Number(that.ruleform.minute);
      var second = !Number(that.ruleform.second)
        ? 0
        : Number(that.ruleform.second);
      //提交的天，小时，分钟，秒的总描述
      var DURATION = day * 86400 + hour * 3600 + minute * 60 + second;
      //console.log(that.ruleform.limited_type);
      if (that.ruleform.limited_type == "FREE") {
        //1.不受限制
        var limited_value = "";
        that.submitFn("FREE", limited_value, formName);
      } else if (that.ruleform.limited_type == "TRAFFIC") {
        //4.流量
        var limited_value = that.ruleform.TRAFFIC;
        that.submitFn("TRAFFIC", limited_value, formName);
      } else if (that.ruleform.limited_type == "DEADTIME") {
        //2.截止时间，日历
        var limited_value = picker_timestamp;
        that.submitFn("DEADTIME", limited_value, formName);
      } else if (that.ruleform.limited_type == "DURATION") {
        //3，总时长，天小时分秒
        var limited_value = DURATION;
        that.submitFn("DURATION", limited_value, formName);
      }
    },
    submitFn(limited_type, limited_value, formName) {
      var that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          postData("/adminweb/device/limit/set", {
            sn: that.sn,
            limited_type: limited_type,
            limited_value: limited_value
          })
            .then(res => {
              if (res.code == 0) {
                that.$message.success("添加成功！");
                that.getList();
              } else {
               that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch(res => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          //that.$message.error("error");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      //this.$emit("reset", true);
      this.$refs[val].resetFields();
    },

    //初始展示
    getList() {
      postData("/adminweb/device/limit/get", {
        sn: this.sn
      })
        .then(res => {
          if (res.code == 0) {
            let datas = res.datas;
            this.getSearchInfo = datas;
            this.ruleform.limited_type = datas.limited_type;
            var limited_type = datas.limited_type;
            var limited_value = datas.limited_value;
            if (limited_type == "FREE") {
              //1.不受限制
              this.ruleform.limited_type == "FREE";
            } else if (limited_type == "TRAFFIC") {
              //4.流量
              this.ruleform.limited_type == "TRAFFIC";
              this.ruleform.TRAFFIC = datas.limited_value;
            } else if (limited_type == "DEADTIME") {
              //2.截止时间，日历
              this.ruleform.limited_type == "DEADTIME";
              var da = datas.limited_value;
              da = new Date(da);
              var year = da.getFullYear();
              var month = da.getMonth() + 1;
              var date = da.getDate();
              var createDate = [year, month, date].join(",");
              this.ruleform.picker = new Date(createDate);
            } else if (limited_type == "DURATION") {
              //3，总时长，天小时分秒,
              this.ruleform.limited_type == "DURATION";
              var DURATION = datas.limited_value;
              var transed = tempToTime(DURATION);
              this.ruleform.day = transed[0];
              this.ruleform.hour = transed[1];
              this.ruleform.minute = transed[2];
              this.ruleform.second = transed[3];
            }
          }else if (res.code == -56055) {
            return;
          }  else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch(res => {
          this.$message.error(res.code + "，" + res.msg);
        });
    }
  },
  watch: {}
};
</script>
<style scoped>
.totalFlow-wrap {
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.content {
  background: #fff;
  border-radius: 10px 10px 0 0;
}
.content:nth-child(2) {
  margin-top: 20px;
}
/*标题*/
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 15px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 27px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
.totalFlow-form {
  padding-left: 30px;
}
.item {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.totalFlow-wrap >>> .el-form--inline .el-form-item__content {
  display: block;
}
.totalFlow-wrap >>> .el-radio {
  margin-top: 0;
}
</style>
